﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活跃用户推荐 - 社交平台</title>

    @include("frontend/bootstrap/common/css")

    <style>

        .container {
            max-width: 1200px;
        }

        /* 分类标题 */
        .section-header {
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid var(--primary-light);
            display: flex;
            align-items: center;
        }

        .section-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background-color: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.75rem;
            flex-shrink: 0;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0;
        }

        /* 主内容区 */
        .main-content {
            padding: 3rem 0;
        }

        /* 页面标题 */
        .page-header {
            text-align: center;
            margin-bottom: 3rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }

        .page-title {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--dark);
        }

        .page-desc {
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto;
        }

    </style>
</head>
<body>

<div class="container main-content">
    <!-- 页面标题 -->
    <div class="page-header">
        <h1 class="page-title">活跃用户推荐</h1>
        <p class="page-desc">发现社区中最活跃的用户，他们分享优质内容、积极参与讨论，是社区的核心力量。关注他们，获取更多精彩内容。</p>
    </div>

    <!-- 样式1: 网格布局用户卡片 -->
    <div class="users-section mb-5">
        <div class="section-header">
            <div class="section-icon">
                <i class="fas fa-th-large"></i>
            </div>
            <h2 class="section-title">热门活跃用户</h2>
        </div>
    </div>
@include("frontend/bootstrap/common/user1")



<!-- 样式2: 横向用户列表 -->
    <div class="users-section mb-5">
        <div class="section-header">
            <div class="section-icon">
                <i class="fas fa-stream"></i>
            </div>
            <h2 class="section-title">新加入活跃用户</h2>
        </div>
    </div>
@include("frontend/bootstrap/common/user2")

<!-- 样式3: 带多图展示的用户卡片 -->
    <div class="users-section mb-5">
        <div class="section-header">
            <div class="section-icon">
                <i class="fas fa-images"></i>
            </div>
            <h2 class="section-title">内容创作达人</h2>
        </div>
    </div>
@include("frontend/bootstrap/common/user3")

<!-- 样式4: 简洁用户网格 -->
    <div class="users-section">
        <div class="section-header">
            <div class="section-icon">
                <i class="fas fa-user-friends"></i>
            </div>
            <h2 class="section-title">你可能感兴趣的用户</h2>
        </div>
    </div>
@include("frontend/bootstrap/common/user4")

<!-- 网格布局用户展示 - 支持多图和无图 -->
    <div class="users-section">
        <div class="section-header">
            <div class="section-icon">
                <i class="fas fa-th-large"></i>
            </div>
            <h2 class="section-title">热门活跃用户</h2>
        </div>
    </div>
@include("frontend/bootstrap/common/user5")

<!-- 列表布局用户展示 - 适合展示更多用户 -->
    <div class="users-section">
        <div class="section-header">
            <div class="section-icon">
                <i class="fas fa-list"></i>
            </div>
            <h2 class="section-title">最新活跃用户</h2>
        </div>
    </div>
    @include("frontend/bootstrap/common/user6")


</div>


</body>
</html>

